<template>
  <div class="member_info">
    <x-header :left-options="{showBack: true, backText: ''}" style="">个人资料</x-header>
    <template>

      <group label-width="9rem" title="" class="group-first">
        <cell title="头像">
          <!--<div>-->

          <div class="avatar">
            <div class="picture">
              <img :src="headerImage" alt="">
            </div>
          </div>
        </cell>

        <cell title="名字" :value="userInfo.user_login"></cell>
        <cell title="性别" :value="userInfo.sex"></cell>
        <cell title="出生年月" :value="userInfo.birthday"></cell>

        <cell primary="content" title="个人承诺" :value="userInfo.promise"></cell>
      </group>

      <group>
        <cell title="手机号" :value="userInfo.mobile"></cell>
        <cell title="邮箱" :value="userInfo.user_email"></cell>
      </group>

      <group>
        <cell :value="userInfo.party_time" title="入党时间"></cell>
        <cell title="党员类别" :value="userInfo.cate"></cell>
        <cell title="工作单位" :value="userInfo.company"></cell>
        <cell title="所在党支部" :value="userInfo.department"></cell>
        <cell title="党内职务" :value="userInfo.job ||isnull"></cell>
      </group>
    </template>
  </div>
</template>

<script>
import { XHeader, Group, Cell } from "vux";
import { mapGetters } from "vuex";

export default {
  name: "Info",
  components: {
    XHeader,
    Group,
    Cell
  },
  data() {
    return {
      isnull: "无",

      userData: {},
      headerImage: require("../img/default-user.png"),
    };
  },
  methods: {}, //计算属性
  computed: {
    ...mapGetters(["userInfo"])
  },
  //触发事件
  created() {
    this.$store.dispatch("getInfo", { id: this.$route.params.memberid });
  },
  activated() {
    this.$store.dispatch("getInfo", { id: this.$route.params.memberid });
  },
  deactivated() {
    this.userData = {};
  },
  //侦听属性
  watch: {
    userInfo: function(val) {
      this.userData = val;
      if (val.avatar) {
        this.headerImage = val.avatar;
      }
    }
  }
};
</script>

<style lang="less">
.member_info {
  .group-first {
    padding: 2.875rem 0 0;
  }

  .group-first .weui-cells {
    margin-top: 0 !important;
  }
  .weui-cell__ft {
    font-size: 13/16rem;
  }
  .avatar {
    width: 45/16rem;
    height: 45/16rem;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
    span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .picture {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>


